<div id="helper-classes-padding-margin" class="p-24">

    <div class="mat-title">Padding Helpers</div>

    <div class="mat-card mat-elevation-z4 p-24" fxLayout="column">

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <span>p-0</span>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="p-0">No padding</span>
                </textarea>
            </fuse-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
                <span>p-4</span>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="p-4">4px padding</span>
                </textarea>
            </fuse-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
                <span>p-12</span>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="p-12">12px padding</span>
                </textarea>
            </fuse-highlight>

        </div>

    </div>

    <div class="mat-title mt-64">Direction Specific Padding Helpers</div>

    <div class="mat-card mat-elevation-z4 p-24" fxLayout="column">

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
                <span>pt-0</span>
                <span>pr-0</span>
                <span>pb-0</span>
                <span>pl-0</span>
                <span>px-0</span>
                <span>py-0</span>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="pt-0">0 padding from top</span>
                    <span class="pr-0">0 padding from right</span>
                    <span class="pb-0">0 padding from bottom</span>
                    <span class="pl-0">0 padding from left</span>
                    <span class="px-0">0 padding from left and right</span>
                    <span class="py-0">0 padding from top and bottom</span>
                </textarea>
            </fuse-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
                <span>pt-4</span>
                <span>pr-4</span>
                <span>pb-4</span>
                <span>pl-4</span>
                <span>px-4</span>
                <span>py-4</span>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="pt-4">4px padding from top</span>
                    <span class="pr-4">4px padding from right</span>
                    <span class="pb-4">4px padding from bottom</span>
                    <span class="pl-4">4px padding from left</span>
                    <span class="px-4">4px padding from left and right</span>
                    <span class="py-4">4px padding from top and bottom</span>
                </textarea>
            </fuse-highlight>

        </div>

    </div>

    <div class="mat-title mt-64">Margin Helpers</div>

    <div class="mat-card mat-elevation-z4 p-24" fxLayout="column">

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <span>m-0</span>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="m-0">No margin</span>
                </textarea>
            </fuse-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
                <span>m-4</span>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="m-4">4px margin</span>
                </textarea>
            </fuse-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
                <span>m-12</span>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="m-12">12px margin</span>
                </textarea>
            </fuse-highlight>

        </div>

    </div>

    <div class="mat-title mt-64">Direction Specific Margin Helpers</div>

    <div class="mat-card mat-elevation-z4 p-24" fxLayout="column">

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
                <span>mt-0</span>
                <span>mr-0</span>
                <span>mb-0</span>
                <span>ml-0</span>
                <span>mx-0</span>
                <span>my-0</span>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="mt-0">0 margin from top</span>
                    <span class="mr-0">0 margin from right</span>
                    <span class="mb-0">0 margin from bottom</span>
                    <span class="ml-0">0 margin from left</span>
                    <span class="mx-0">0 margin from left and right</span>
                    <span class="my-0">0 margin from top and bottom</span>
                </textarea>
            </fuse-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
                <span>mt-4</span>
                <span>mr-4</span>
                <span>mb-4</span>
                <span>ml-4</span>
                <span>mx-4</span>
                <span>my-4</span>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="mt-4">4px margin from top</span>
                    <span class="mr-4">4px margin from right</span>
                    <span class="mb-4">4px margin from bottom</span>
                    <span class="ml-4">4px margin from left</span>
                    <span class="mx-4">4px margin from left and right</span>
                    <span class="my-4">4px margin from top and bottom</span>
                </textarea>
            </fuse-highlight>

        </div>

    </div>

</div>
